import React from 'react';
import ReplyStore from '../../stores/reply';
import { WeaSearchGroup, WeaFormItem, WeaLocaleProvider } from 'ecCom'
import { WeaSwitch } from 'comsMobx';
import { observer } from 'mobx-react';
import { Row, Col, Button } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;
import $ from "jquery";

export interface SearchPanelProps {
    reply: ReplyStore;
    style?: React.CSSProperties;
}

@observer
export default class SearchPanel extends React.Component<SearchPanelProps, any> {
    componentDidMount() {
        this.fiexedWidth();
    }
    componentDidUpdate() {
        this.fiexedWidth();
    }
    fiexedWidth = () => {
        const $content = $(".cube-reply-content");
        $(this.refs._container).width($content.width());

    }
    getSearchs = () => {
        const { reply } = this.props;
        return reply.conditionInfo ? reply.conditionInfo.map(item => {
            return {
                com: (<WeaFormItem
                    label={item.label}
                    labelCol={{ span: item.labelcol }}
                    error={reply.condition.getError(item)}
                    wrapperCol={{ span: item.fieldcol }}>
                    <WeaSwitch fieldConfig={item} form={reply.condition} />
                </WeaFormItem>),
                colSpan: item.colSpan
            }
        }) : [];
    }
    render() {
        const { reply } = this.props;
        const visibleStyle = { display: `${reply.showSearchDrop ? 'block' : 'none'}` }
        return (
            <div className="cube-search-panel" ref="_container" style={this.props.style}>
                <div className="cube-search-arrow" style={{ right: 110 }} />
                <div className="cube-search-container" style={visibleStyle}>
                    <WeaSearchGroup title={getLabel(20331,"查询条件")} needTigger={true} showGroup={true} items={this.getSearchs()} />
                    <Row style={{ borderTop: '1px solid #dadada', padding: '20px 0' }}>
                        <Col span={24} style={{ textAlign: 'center' }}>
                            <Button type="primary" style={{ marginRight: 15 }} onClick={reply.search}>{getLabel(197,"搜索")}</Button>
                            <Button type="ghost" style={{ marginRight: 15 }} onClick={reply.resetSearch} >{getLabel(2022,"重置")}</Button>
                            <Button type="ghost" style={{ marginRight: 15 }} onClick={reply.hideSearch}>{getLabel(201,"取消")}</Button>
                        </Col>
                    </Row>

                </div>
                <div className="cube-search-mask" style={visibleStyle} />
            </div>
        )
    }
}